<template>
  <div class="test">
    <canvas width="400" height="400" ref="cvsRef"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { mapNumToAngle } from "../utils/mapNumToAngle";
export default defineComponent({
  name: "test",
  setup() {
    const cvsRef = ref<HTMLCanvasElement>();
    onMounted(() => {
      const ctx = cvsRef.value?.getContext("2d");
      if (ctx) {
        // lineJoin= type
        // 同一个path内，设定线条与线条间接合处的样式。
        // 共有3个值round, bevel 和 miter：
        // round
        // 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
        // bevel
        // 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
        // miter(默认)
        // 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。
        ctx.beginPath();
        ctx.lineJoin = "round";
        ctx.lineWidth = 20;
        ctx.moveTo(50, 50);
        ctx.lineTo(100, 50);
        ctx.lineTo(100, 100);
        ctx.stroke();
      }
    });
    return { cvsRef };
  },
});
</script>
<style scoped>
.test {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
canvas {
  border: 1px solid red;
}
</style>
